<!--
 * @Author: Mark
 * @Date: 2019-02-02 10:17:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2019-02-23 23:08:01
 * @Description: 商品管理
 -->
<template>
  <div class="goods">

    <!-- 1.搜索组件  -->
    <el-row>
      <el-col :span="24">
        <!-- 下拉框 -->
        <el-cascader
          expand-trigger="hover"
          change-on-select
          :options="data.goodsCateCascader"
          v-model="page.searchCascaderOption"
        >
        </el-cascader>

        <!-- 输入框 -->
        <el-input
          style="width:200px"
          placeholder="请输入搜索商品名称"
          v-model="page.searchGoodsName"
          clearable
        >
        </el-input>

        <!-- 搜索按钮 -->
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchGoodss"
        >搜索</el-button>

      </el-col>
    </el-row>

    <!-- 加工零件信息列表 start -->
    <!-- 添加加工零件的按钮 -->
    <el-row style="margin-bottom:10px;text-align: right">
      <el-button
        type="primary"
        @click="dialogFormVisible = true"
      >新增加工零件</el-button>
    </el-row>

    <!-- 点击新增按钮商品弹出窗口 -->
    <el-dialog
      :title="form.title"
      :visible.sync="dialogFormVisible"
      width="30%"
      class="dialog"
    >
      <el-form
        :model="form"
        label-width="80px"
        :rules="AccoutFromRules"
        ref="ruleForm"
      >
        <el-form-item
          label="零件"
          prop="name"
        >
          <el-input
            style="width:217px"
            v-model="form.name"
            placeholder="请输入加工零件名称"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="种类"
          prop="name"
        >
          <el-cascader
            expand-trigger="hover"
            change-on-select
            :options="data.goodsCateCascader2From"
            v-model="page.searchCascaderOption2From"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item label="图片">
          <el-input
            style="width:217px"
            type="file"
            ref="goodsImage"
          ></el-input>
        </el-form-item>

        <el-form-item label="单价(元)">
          <el-input-number
            style="width:217px"
            class="price"
            v-model="form.price"
            size="medium"
            :precision="2"
            :step="0.01"
            :min="0.01"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="权重">
          <el-input-number
            style="width:217px"
            class="priority"
            v-model="form.priority"
            size="medium"
            :min="1"
          ></el-input-number>
        </el-form-item>

      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submit('ruleForm')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 加工零件分页信息显示  -->
    <el-row :gutter="10">
      <el-col style="margin-bottom:10px"
        :span="4"
        v-for="(goods, index) in data.goodsListData"
        :key="index"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          class="img-card"
        >

          <img
            v-if="goods.imgAddr == null"
            src="../../../static/images/bill/notGoods.png"
            class="image"
          >
          <img
            v-else
            v-lazy="goods.imgAddr"
            class="image"
          >
          <div style="padding: 14px;">
            <span>{{goods.goodsName}}</span>
            <div class="bottom clearfix">
              <time class="title">{{goods.price}}</time>
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                class="button"
                icon="el-icon-delete"
                circle
              ></el-button>
              <!-- 编辑按钮 -->
              <el-button
                @click="editGoodsInfo(goods)"
                type="primary"
                class="button"
                icon="el-icon-edit"
                circle
              ></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 加工零件的分页组件 -->
    <el-row style="float:right;margin-top:10px">
      <el-pagination
        v-if="data.goodsListData.length>0"
        class="pagination-content"
        small
        layout="prev,pager, next"
        :total="page.total"
        :page-size="page.pageSize"
        @prev-click="clickProPre"
        @next-click="clickProNext"
        @current-change="clickProPage"
      >
      </el-pagination>
    </el-row>
    <!-- 加工零件信息列表 end -->

  </div>
</template>

<script>
import Tips from "@/utils/tipsUtil";
const _tips = new Tips();
import Goods from "@/service/bill/goods-service";
const _goods = new Goods();
import GoodsCategory from "@/service/bill/goods-category-service";
const _goodsCategory = new GoodsCategory();
export default {
  data() {
    return {
      value: "",
      //加工零件显示的分页信息
      page: {
        searchGoodsName: "", //搜索商品名称
        searchCascaderOption: [],
        searchCascaderOption2From: [], //新增或者编辑商品的时弹出框中的下拉框，该下拉框中的数据不包含“跟种类”，选中种类id层级列表
        pageNum: 1,
        pageSize: 12,
        total: 0
      },
      data: {
        goodsListData: [], //缓存请求加工零件的列表信息
        selectData: Object,
        goodsCateCascader: [], //搜索加工零件种类的下拉框
        goodsCateCascader2From: [] //新增或者编辑商品的时弹出框中的下拉框，该下拉框中的数据不包含“跟种类”
      },
      dialogFormVisible: false, //添加或者修改加工零件的弹出窗
      dialogFormIsAdd: true, //弹出窗操作的标志位，true表示新增操做，false表示修改操作

      //新增或者修改加工零件的表单属性
      form: {
        title: "新增加工零件", //标题，默认显示新操作信息
        goodId: "", //加工零件的ID,当修改操作的时候需要用到
        name: "", //加工零件的名称
        price: 0.01, //单价
        priority: "1" ,//权重，排序用
        id : ''//id编辑的时候需要传递给后台
      },

      AccoutFromRules: {
        name: [
          { required: true, message: "请输入加工商品名称！", trigger: "blur" }
        ]
      }
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.intiGoods();
      this.intiGoodsCateCascader();
    },

    /**
     * 初始化获取商品列表信息
     */
    intiGoods() {
      const vue = this;
      _goods.getGoods(vue.page).then(
        res => {
          vue.data.goodsListData = res.data.list;
          vue.page.total = res.data.total;
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    /**
     * 获取加工零件种类下拉框的数值
     */
    intiGoodsCateCascader() {
      const vue = this;
      _goodsCategory.getGoodsCateCascader().then(
        res => {
          vue.data.goodsCateCascader = vue.data.goodsCateCascader.concat(
            res.data
          );
          vue.data.goodsCateCascader2From = res.data;
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    /**
     * 点击搜索按钮的响应的事件
     */
    searchGoodss() {
      //重置搜索的页数和页码信息
      const vue = this;
      vue.page.pageNum = 1;
      vue.page.pageSize = 12;

      //获取搜索的信息
      let categoryId ; //搜索加工零件的种类Id
      let searchGoodsName = vue.page.searchGoodsName;//模糊搜索加工零件的名称
      if(vue.page.searchCascaderOption == null || vue.page.searchCascaderOption.length == 0){
        categoryId = null;
      }else{
        categoryId = vue.page.searchCascaderOption[vue.page.searchCascaderOption.length - 1];
      }

      //请求后台接口参数封装
      const requestparam = {
        pageNum: vue.page.pageNum,
        pageSize: vue.page.pageSize,
        categoryId : categoryId,
        searchGoodsName : searchGoodsName
      }
       _goods.getGoods(requestparam).then(
        res => {
          vue.data.goodsListData = res.data.list;
          vue.page.total = res.data.total;
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );



    },

    /**
     * 1.提交新增或者修改加工零件表单
     */
    submit(form) {
      let vue = this;

      //种类的验证
      if(this.page.searchCascaderOption2From == null || this.page.searchCascaderOption2From.length == 0){
        _tips.notifyTips(vue, "请选择种类！");
        return;
      }

      this.$refs[form].validate(valid => {
        if (valid) {
          const goodsImages = this.$refs.goodsImage.$refs.input.files[0];
          const fkCategoryId = this.page.searchCascaderOption2From[this.page.searchCascaderOption2From.length - 1]
          let formData = new FormData();
          formData.append("goodsName", this.form.name);
          formData.append("price", this.form.price);
          formData.append("priority", this.form.priority);
          formData.append("goodsImage", goodsImages);
          formData.append("fkCategoryId", fkCategoryId)

          //判断当前弹出窗表单提交的是新增还是修改操作
          if (vue.dialogFormIsAdd) {
            //新增加工零件操做
            _goods.addGoods(
              formData,
              res => {
                _tips.notifyTips(vue, res.data.msg);
                //刷新页面
                vue.intiGoods()
              },
              err => {
                _tips.notifyTips(vue, err.data.msg);
              }
            );
          } else {
            //修改操作
            formData.append("id", this.form.id);
            _goods.editGoods(
              formData,
              res => {
                _tips.notifyTips(vue, res.data.msg);
                //刷新页面
                vue.intiGoods()
                //关闭弹出窗
                vue.dialogFormVisible = false; 
              },
              err => {
                _tips.notifyTips(vue, err.data.msg);
                //关闭弹出窗
                vue.dialogFormVisible = false; 
              }
            );
          }
        }
      });
    },

    /**
     * 5.点击商品分页组件的上一页
     */
    clickProPre() {
      this.page.pageNum--;
      this.intiGoods();
    },

    /**
     * 6.点击商品分页组件的下一页
     */
    clickProNext() {
      this.page.pageNum++;
      this.intiGoods();
    },

    /**
     *7.点击商品分页组件的页码
     */
    clickProPage(page) {
      this.page.pageNum = page;
      this.intiGoods();
    },

    /**
     * 点击商品信息中的编辑按钮
     */
    editGoodsInfo(editGoodsInfo) {
      const vue = this;
      vue.form.title = "编辑加工零件"; //更改弹出的标题
      vue.dialogFormIsAdd = false; //修改弹出的操作为编辑
      vue.dialogFormVisible = true; //显示弹出窗

      //表单信息回填
      vue.form.id = editGoodsInfo.id; //缓存ID信息
      vue.form.name = editGoodsInfo.goodsName;
      vue.form.price = editGoodsInfo.price;
      vue.form.priority = editGoodsInfo.priority;
      vue.form.categoryId = editGoodsInfo.fkCategoryId;
      vue.page.searchCascaderOption2From.push(editGoodsInfo.fkCategoryId) //种类下拉框的回填
    }
  }
};
</script>
<style lang='scss' scoped>
.goods {
  text-align: left;
  .img-card {
    .image {
      width: 100%;
      height: 100%;
      display: block;
    }
    .title {
      font-size: 13px;
      color: #999;
    }
    .button {
      float: right;
      padding: 7px;
      margin-right: 5px;
      margin-bottom: 10px;
    }
  }
}
</style>